<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>菜单管理</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0">
<%-- 引用layui.css --%>
<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="css/ibox.css" />
<link rel="stylesheet" type="text/css"href="css/common.css" />
</head>
<body>
	<div class="ibox">
		<!-- 搜索区 -->
		<div class="ibox-title">
			<div class="title">&nbsp;&nbsp;&nbsp;
				菜单管理
			</div>
		</div>
		<div class="ibox-content">
			<div class="ibox-toolbar">
				<button onclick="appear.addForm();" data-modal="login/toMenuModel.do"
					data-title="添加菜单" class="layui-btn layui-btn-sm">
					<i class="layui-icon">&#xe61f;</i> 添加菜单
				</button>
			</div>
			<table class="layui-table"
				lay-data="{
                      id: 'menuTeble',
                      width:'auto',
                      url:'menuManger/getMenuListMethod.do',
                      page:true,
                      even:true,
                      skin:'line',
                      limits:[10,20,30,40,50],
                      limit:10}"
				lay-filter="ttable">
				<thead>
					<tr>
						<th lay-data="{checkbox: true,disabledKey:'menu_id',disabledKeyValue:'01,0101'}"></th>
						<th lay-data="{field:'menu_id', width:100}">ID</th>
						<th lay-data="{field:'icon', width:120, align: 'center', templet:'#icon_temp'}">图标</th>
						<th lay-data="{field:'menu_name', width:280, templet:'#menu_temp'}">菜单名</th>
						<th lay-data="{field:'url', width:280}">请求路径</th>
						<th lay-data="{field:'rel', width:160}">标识</th>
						<th lay-data="{fixed: 'right', width:230, align:'center', toolbar: '#barDemo'}"></th>
					</tr>
				</thead>
			</table>
		</div>
	</div>

	<%-- 点击添加按钮会显示的form表单的设计 --%>
	<div id = "addMenuTable" style = "display:none;" >
		<form class="layui-form" action="" style="margin:30px;">
			<div class="layui-form-item">
				<label class="layui-form-label">父级菜单名称</label>
				<div class="layui-input-block">
					<select name="pmenu_id"><!-- 这个地方实际上对应的是菜单的menu_id -->
						<!-- 查找对应的等级进行符号的添加 -->
						<c:forEach items="${list }" var="obj">
							<option value="${obj.menu_id}" id = "menuid">等级：${obj.lev} ${obj.menu_name}</option>
						</c:forEach>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">想添加的菜单名称</label>
				<div class="layui-input-block">
					<input type="text" name="menu_name" required lay-verify="required"
						placeholder="请输入想添加的菜单名称" autocomplete="off" class="layui-input"/>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">页签名称</label>
				<div class="layui-input-block">
					<input type="text" name="rel" required lay-verify="required"
						placeholder="请输入唯一标识" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">菜单的指向连接</label>
				<div class="layui-input-block">
					<input type="text" name="url" required lay-verify="required"
						placeholder="请输入菜单指向链接" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">菜单的排序id</label>
				<div class="layui-input-block">
					<input type="text" name="menuOrder" required lay-verify="required"
						placeholder="请输入序号" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">菜单的图标</label>
				<div class="layui-input-inline" style="width:300px">
					<input placeholder="请输入或选择图标" lay-verify="required"
						onchange="$('#icon-previewup').html(this.value)"
						type="text" name="icon" value="" class="layui-input">
				</div>
				<span class="layui-btn layui-btn-primary"
					style="padding:0 12px;min-width:45.2px"> <i
					id="icon-preview" style="font-size:1.2em" class="icon iconfont">&#xe630;</i>
				</span>
				<button id="menu_icon" data-icon="icon" type="button"
					class="layui-btn layui-btn-primary">选择图标</button>
			</div>
			<div class = "layui-form-item">
				<!-- 定义两个按钮 -->
				<input class = "layui-btn" lay-submit lay-filter="addMenu" value = "提交">
				<input class = "layui-btn layui-btn-primary" type = "reset" value = "重置">
			</div>			
		</form>
	</div>
	
	<!-- 点击生成的更改菜单信息的表单 -->
	<div id = "updateDiv"  style = "display:none;">
		<form class="layui-form" action="" style="margin:30px;">
			<div class="layui-form-item">
				<label class="layui-form-label">菜单的名称</label>
				<div class="layui-input-block">
					<input type="text" name="menu_name" required lay-verify="required" id = "upMenuName"
						 autocomplete="off" class="layui-input"/>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">唯一标识</label>
				<div class="layui-input-block">
					<input type="text" name="rel" required lay-verify="required" id = "upRel"
						placeholder="" autocomplete="off" class="layui-input"/>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">菜单的连接</label>
				<div class="layui-input-block">
					<input type="text" name="url" required lay-verify="required" id = "upUrl"
					 autocomplete="off" class="layui-input"/>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">菜单的图标</label>
				<div class="layui-input-block">
					<input type="text" name="icon" required lay-verify="required" id = "upIcon"
						autocomplete="off" class="layui-input"/>
				</div>
			</div>
			<!-- 添加一个隐藏于用于将菜单的menu_id携带到后台 -->
			<input type = "hidden" name = "menu_id" id = "upMenuid" />
			<!-- 添加的弹出框的两个按钮 -->
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="updateSubmit">立即更新</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	
	<div id = "delDiv" style = "display:none;" >
		<form class="layui-form" style="margin:30px;" >
			<input type = "hidden" name = "menu_id" id = "upMenuid" />	
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="delSubmit">删除</button>
					<button type="reset" class="layui-btn layui-btn-primary">取消</button>
				</div>
			</div>
		</form>
	</div>
	<script type="text/javascript" src="js/common/jquery-1.11.3.js"></script>
	<script type="text/javascript" src="js/layui/layui.js"></script>
	<script type="text/javascript">
        layui.config({
            base: "js/common/"
        }).use(["common", "layer", "element", "form", "table", "jquery"], function(){
            var layer = layui.layer;
            var table = layui.table;
            var $ = layui.jquery;
            var form = layui.form;
            var table = layui.table;
             layui.common.init();
             
             //监听添加菜单的添加页面的事件
             form.on('submit(addMenu)',function(data){//data代表的是表单里面的数据，是一个对象
             		$.ajax({
            			type : "post",	
           				url : "menuManger/addMenu.do",
           				data : data.field,
           				dataType : "json",//传回去的数据类型
           				success : function (data){
           					if(data.satausCode == 200){
           						layer.msg(data.message,{icon : 6});
           						table.reload("menuTeble");
           						layer.close(index);
           					}else{
           						layer.msg(data.message,{icon : 8});	
           					}
           				}
             		})
             })
             //监听更新菜单的提交事件
             form.on('submit(updateSubmit)',function(data){
             		$.ajax({
						type : "post",
						url : "menuManger/updateMenu.do",   
						data : data.field,
						dataType : "json",
						success : function(data){
							 //进行判断
							 if(data.satausCode == 200){
							 	layer.msg(data.message,{icon : 6});
							 	table.reload('menuTeble',{
									where : data.field
								})
							 }else{
								layer.msg(data.message,{icon : 8});							 
							 }
						}
             	   })
             })
           	//这个地方进行编写编辑的功能，首先监听表格的行事件
            table.on('tool(ttable)',function(tableData){
            	var tdata = tableData.data;   //获取的是当前的表格的数据
            	var tr = tableData.tr;
            	//首先是监听的是编辑的事件
            	var event = tableData.event;
            	var menu_id = tdata.menu_id;
            	//判断是否是编辑的功能
            	if(event == "edit" ){
            		//在弹出编辑的界面之前进行表单数据的赋值
            		$("#upMenuName").val(tdata.menu_name);//后面的是根据的是name的属性进行赋值的
            		$("#upRel").val (tdata.rel) ;
            		$("#upUrl").val (tdata.url);
            		$("#upIcon").val (tdata.icon);
            		$("#upMenuid").val (tdata.menu_id);
            		layer.open({
            			type : 1,
            			title : "充值列表",
            			content : $("#updateDiv"),
            			area : ['700px','400px'],
            			anim : 5,
						isOutAnim: true,
	                    maxmin: true,
	                    resize: false,
	                    moveOut: true,
	                    zIndex: 99999	
            		})
            	}else if(event = "del"){
            		layer.msg('确定要删除吗?',{
						time : 0,//不是自动关闭            		
            			btn : ['好的呢*','还没想好呢@'],//设置两个按钮
            			yes : function (index){
            				//使用ajax请求到后台进行数据库的操作
            				$.ajax({
            						type : "post",
            						url : "menuManger/deleteMenu.do",
            						data : {
            							"menuid" : menu_id
            						},
            						dataType : "json",
            						success : function (ajaxData){
            						if(ajaxData.satausCode == 200){
            								layer.close(index);
            								layer.msg(ajaxData.message,{icon : 6 ,time : 2000});
            								table.reload('menuTeble',{
												where : ajaxData.field
											})
            						}else{
            								layer.msg(ajaxData.message);
            						}
            					}
            				})
            			}
            		})	
            	}
            }) 
        });
        
		   //首先是监听点击添加菜单之后显示当前页面上的form表单
           var appear = {
				addForm : function(){
					index = layer.open({
						type : 1,
						title : "添加菜单的弹出页面",
						content : $("#addMenuTable"),//绑定当前页面中需要弹出form表单的属性通过id属性
						area : ['700px','600px'],//设定弹出界面的大小，宽和高
						anim : 5,
						isOutAnim: true,
	                    maxmin: true,
	                    resize: false,
	                    moveOut: true,
	                    zIndex: 99999					
					});
			    }       
             }
       
    </script>

	<script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script type="text/html" id="menu_temp">
        {{#  for(var i = 0;i < d.lev - 1;i++){ }}
            &nbsp;&nbsp;&nbsp;├&nbsp;&nbsp;
        {{#  } }}
        {{  d.menu_name }}    
    </script>
	<script type="text/html" id="icon_temp">
        {{# if(d.icon.indexOf('&#') >= 0){  }}
            <i class="layui-icon">{{d.icon}}</i>
        {{# }else { }}
            <i class="{{d.icon}}"></i>
        {{# }  }}
    </script>
</body>
</html>